<template>
    <div>
        <l-header></l-header>
        <div class="w89">
            <h2 class="title">{{$t('CAVideo.index.5636mvvme9s0')}}</h2>
            <div>
                <div class="video">
                    <input type="file"  @change="afterRead($event)" capture="camcorder" accept="video/*">
                    <van-loading :color="color" v-show="VideoShow"  />
                    <video :src="videoUrl" id="videoas" v-show="videoUrl?true:false" ></video>
                    <img :src="titleList.pic||''" alt="" v-show="videoUrl?false:true">
                    <span v-show="videoUrl?true:false" class="video_img"></span>
                </div>
                <p class="video_title">{{titleList['name_'+langSuff]}}</p>
            </div>
            <div class="video_msg">
                <h3>{{$t('CAVideo.index.5636mvvmfss0')}}</h3>
                <p>1. {{$t('CAVideo.index.5636n3m3hjc0')}} <span> {{$t('CAVideo.index.5636olumvsw0')}} </span>{{$t('CAVideo.index.5636mvvmg1k0')}}</p>
                <p>2. {{$t('CAVideo.index.5636n3m3iio0')}} <span>{{$t('CAVideo.index.5636mvvmg9w0')}}</span></p>
                <p>
                    <img src="@/assets/img/ca_en.png" alt="" v-if="langSuff=='en'">
                    <img src="@/assets/img/ca_tc.png" alt="" v-if="langSuff=='tc'">
                    <img src="@/assets/img/ca.png" alt="" v-else>

                </p>
            </div>
           <van-button type="info" block class="next-step"  @click="onSubmit" :loading="loading">{{$t('documentType.index.5636jiatocw0')}}</van-button>
        </div>
    </div>
</template>
<script>
import { fff } from '@/assets/less/global.less'
import { uploads } from '@/api/common'
import {  submitList , videoList } from '@/api/common'

 
export default {
    inject: ['StepsPage','user_fill','page_info','onload'],
    computed:{
        color(){
            return fff
        },
        StepsPageList(){
            return this.StepsPage()
        },
        user_fill_list(){
            return this.user_fill()
        },
        langSuff(){
            return  this.$store.state.langSuff
        },
    },
    data() {
        return {
            VideoShow:false,
            videoUrl:'',
            loading:false,
            titleList:{}
        }
    },
    mounted(){
        this.videoList()
        //   var vConsole = new VConsole();
    },
    methods:{
        afterRead(e){
            var u = navigator.userAgent;
            var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
            var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
            this.VideoShow=true;
            var _this = this;
            var video = event.target.files[0];  //选择的文件
            if(video==undefined){
                return false;
            }
            let time;
            if(isAndroid){
                var reader = new FileReader();
                var rs = reader.readAsArrayBuffer(video)
                reader.onload = (e) => {
                    let data
                    if (typeof e.target.result === 'object') {
                        data = window.URL.createObjectURL(new Blob([e.target.result]))
                    } else {
                        data = e.target.result
                    }
                    _this.video = data;
                    const video =document.getElementById("videoas")
                    video.onloadedmetadata = event => {
                        setTimeout(() => {
                            time = (document.getElementById("videoas").duration).toFixed(2)
                            _this.uploadsVideo(time,video)
                        }, 500);
                    }
                }
            }
            if(isiOS){
                var url = URL.createObjectURL(video);
                var audioElement = new Audio(url);
                audioElement.addEventListener("loadedmetadata", function (_event) {
                    var duration = audioElement.duration;
                    _this.uploadsVideo(duration,video)
                });
            }

        },
        // 上传视频
        uploadsVideo(size,file){
            if(size<5 || size>15){
                this.$toast(this.$t('CAVideo.index.5636p3aeql40'))
                this.VideoShow=false;
                return false
            }
            var formData = new FormData(); //构造一个 FormData，把后台需要发送的参数添加
        　　formData.append('file',file); //接口需要传的参数
            uploads(formData)
            .then(res=>{
                this.VideoShow=false;
                if(res.code==1){
                    this.cardZShow=false;
                    this.videoUrl = res.data.url;
                }
            })
            .catch(error=>{
                this.VideoShow=false;
            })
        },
        onSubmit(){
            if(!this.videoUrl){
                this.$toast(this.$t('login.index.5638tdeew440')+this.$t('CAVideo.index.5636mvvme9s0'))
                return false
            }
            this.loading=true;
            var { curr_id } =  this.StepsPageList;
            var obj = Object.assign({}, {pageId:curr_id , fields :Object.assign({},{videoUrl:this.videoUrl,legalizeType:1})  })
            var _this  =this;
            submitList(obj)
            .then(res=>{
                if(res.code==1){
                    this.$nextPage({pageId:this.StepsPageList.next_id})
                    .then(next=>{
                        this.loading = false;
                    })
                }else{
                    this.loading = false;
                    this.$toast(res.msg)
                }
            })
            .catch((res)=>{
                this.loading = false;
            })
        },
        videoList(){
            videoList().then(res=>{
                this.titleList=res.data??{}
            })
        }
        
        
    },
    watch:{
        user_fill_list:{
            handler(list,old){
                this.videoUrl=''
                this.$forceUpdate();
                this.videoUrl = list.videoUrl
            },
            immediate:true,
            deep:true
        }
    }
}
</script>
<style lang="less" scoped>
    .video{
        position: relative;
        width: 4rem;
        height: 4rem;
        margin: 0 auto;
        background: @grey;
        border-radius: 100%;
        overflow: hidden;
        position: relative;
        .center;
        input{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            z-index: 2;
        }
         .van-loading{
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 3;
            position: absolute;
            top:0;
            left: 0;
            .center;
        }
        video{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            filter:blur(10px);
            -webkit-filter:blur(10px);
            -moz-filter:blur(10px);
            -ms-filter:blur(10px);
            -o-filter:blur(10px);
            object-fit: fill;
        }
        img{
            display: block;
            margin:  auto;
            max-width: 100%;
            max-height: 100%;
        }
        .video_img{
            width: 100%;
            height: 100%;
            z-index: 1;
            position: relative;
            background: rgba(255, 255, 255, 0.55) url('~@/assets/img/video_img.png') no-repeat center;
            background-size: 1.64rem;
        }
    }
    .video_title{
        .center;
        font-size: 0.26rem;
        color: @btnColor;
        line-height: 0.3rem;
        padding: 0.39rem 0 0.98rem 0;
        
    }
    .video_msg{
        h3,p{
            font-size: 0.26rem;
            color: @sizeColor;
            span{
                color: @btnColor;
            }
        }
        h3{
            padding-bottom: 0.25rem;
        }
        img{
            max-width: 100%;
            padding:0.5rem 0.3rem;
        }
    }
</style>